<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/sub.css">
<link rel="stylesheet" href="css/jquery.flex-images.css">
<script src="js/jquery.min.js"></script>
<script src="js/common.js"></script>
<style>
    .nav-box .xiangying{
        width: 31%;
    }
    @media (max-width: 1376px) {
        .nav-box .xiangying{
            width: 24%;
        }
    }
    @media (min-width: 1376px)
    {
        .content-box .xiangying {
            width: 59%;
        }
    }
</style>
<body style="background: #F7F8FA">


<div id="flow">
    <div style="position: relative;">
        <div id="go_top"><a><img src="images/flow-to-top-icon.png"></a></div>
        <div id="sub-cat-btn">
            <a><img src="images/flow-to-cat-icon.png"></a>
            <div class="flow-sub-cat" style="display: none">
                <ul>
                    <li style="background: url(images/sub/cat-icon-1.png) left center no-repeat;"><a>公路视讯</a></li>
                    <li style="background: url(images/sub/cat-icon-2.png) left center no-repeat;"><a>公路视讯</a></li>
                    <li style="background: url(images/sub/cat-icon-3.png) left center no-repeat;"><a>公路视讯</a></li>
                    <li style="background: url(images/sub/cat-icon-4.png) left center no-repeat;"><a>公路视讯</a></li>
                    <li style="background: url(images/sub/cat-icon-5.png) left center no-repeat;border: none"><a>公路视讯</a></li>
                </ul>
            </div>
        </div>

    </div>


</div>

<div class="main">
    <div class="top-nav-box over-flow">
        <span class="pull-left">今天是:2016年07月25日&nbsp;&nbsp;星期一</span>
        <span class="pull-right"><a class="login-btn">登陆</a>&nbsp;|&nbsp;<a>注册</a>&nbsp;|&nbsp;<a>设为首页</a></span>
    </div>
    <script>
        $(function(){
            $('.first-li' ).stop().mouseover(function(){
                $(this ).addClass('active' )
                $(this ).find('.sub-nav-box' ).stop().slideDown('fast')
            } ).mouseout(function(){
                $(this ).removeClass('active')
                $(this ).find('.sub-nav-box' ).stop().slideUp('fast')
            })

        })
    </script>

</div>
<div class="nav-box">
    <div class="logo-box pull-left"><img src="images/logo.png"></div>
    <ul class="nav-list pull-left">
        <li class="first-li has-sub">
            <a class="first-a" href="shouye.html" style="width: 85px;">首页</a>
            <ul class="sub-nav-box">
                <li><a>政务网</a></li>
                <li class="last"><a>活动网</a></li>
            </ul>
        </li>
        <li class="first-li  has-sub">
            <a class="first-a" style="" href="pic-2.html" class="">图片</a>
            <ul class="sub-nav-box ">
                <li><a>法律法规</a></li>
                <li><a>交通杂志</a></li>
                <li><a>交通简讯</a></li>
                <li><a>交通年鉴</a></li>
                <li><a>每日网讯</a></li>
                <li><a>交通志</a></li>
                <li class="last"><a>其它</a></li>
            </ul>
        </li>
        <li class="first-li has-sub">
            <a class="first-a" style="width: 85px;">文档</a>
            <ul class="sub-nav-box over-flow">
                <li><a>公路</a></li>
                <li><a>水路</a></li>
                <li><a>铁路</a></li>
                <li><a>民航</a></li>
                <li><a>综合管理</a></li>
                <li class="last"><a>摄影师</a></li>
            </ul>
        </li>
        <li class="first-li">
            <a class="first-a" href="shipin-sub.html">视频</a>
        </li>
        <li class="first-li  curr"><a  class="first-a">文献</a></li>
        <li class="first-li"><a class="">全站导航</a></li>
    </ul>
    <div class="pull-right">
        <button class="change-model-btn">切换到瀑布流模式</button>
    </div>
</div>
<div class="main over-flow clearfix">

</div>

<div class="main over-flow clearfix">
    <div class="content-box over-flow">
        <div>
            <div class="xiangying over-flow pull-left" style="margin-right: 20px;">
                <div class="search-box-list" style="width: 80%">
                    <input id="search-one" type="text" class="main-search-input" placeholder="请输入关键词"/>
                </div>
                <div class="search-box-list" style="width: 20%">
                    <input class="main-search-btn" type="submit" value="搜索"/>
                </div>

            </div>
            <div class="cat-icon-list over-flow pull-left">
                <dl class="pull-left active">
                    <dt><img src="images/sub/cat-icon-1.png"></dt>
                    <dd>公路视讯</dd>
                </dl>
                <dl class="pull-left">
                    <dt><img src="images/sub/cat-icon-2.png"></dt>
                    <dd>公路视讯</dd>
                </dl>
                <dl class="pull-left">
                    <dt><img src="images/sub/cat-icon-3.png"></dt>
                    <dd>公路视讯</dd>
                </dl>
                <dl class="pull-left">
                    <dt><img src="images/sub/cat-icon-4.png"></dt>
                    <dd>公路视讯</dd>
                </dl>
                <dl class="pull-left">
                    <dt><img src="images/sub/cat-icon-5.png"></dt>
                    <dd>公路视讯</dd>
                </dl>
            </div>
            <div class="pull-right" style="text-align: right">
                <p style="font-size: 25px;color: #2390D0;padding-bottom:0px;margin: 0px;">1739</p>
                <p>共1739个视频</p>
            </div>
        </div>

        <ul class="pipei-words-list clearfix">
            <li class="active"><a>匹配关键词</a></li>
            <li><a>匹配关键词</a></li>
            <li><a>匹配关键词</a></li>
            <li><a>匹配关键词</a></li>
            <li><a>匹配关键词</a></li>
        </ul>
    </div>
</div>
<div class="main over-flow">

    <div class="flex-images">

    </div>
</div>

<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
<script type="text/javascript" src="js/jquery.flex-images.min.1.0.4.js"></script>
<script>

    function loadPhoto(){
        $.post('json.php',{},function(response){
            $(response).appendTo('.flex-images').find('img').lazyload({ effect: "fadeIn", threshold :10 });
            $('.flex-images').flexImages({'rowHeight':200});
        },'json')
    }
   loadPhoto()
    $(window).on('scroll',function(){
        var scrollTop = $(document).scrollTop(),
                windowH = $(window).height(),
                documentH = $(document).height(),
                nowH = scrollTop + windowH;
        if( nowH >= documentH - 550 ){
            loadPhoto();
        }
    })


</script>
</body>
</html>